import React, { Component } from 'react';
import { ColorPicker, WhiteSpace, Button, WingBlank, Tabs, Tools } from 'weaver-mobile';
const getLabel = Tools.getLabel;

export default class Demo extends Component {
  render() {
    const color = window.localStorage['theme-color'] || '55b1f9';
    const tabs = [
      { title: '1st Tab' },
      { title: '2nd Tab' },
      { title: '3rd Tab' },
      { title: '4th Tab 4th Tab 4th Tab' },
      { title: '5th Tab' },
      { title: '6th Tab' },
      { title: '7th Tab' },
      { title: '8th Tab' },
      { title: '9th Tab' },
    ];
    return (
      <div className='wm-change-theme-color'>
        <WhiteSpace size='lg' />
        <WingBlank size="lg">{getLabel('520450','当前主题色')}</WingBlank>
        <WhiteSpace size='md' />
        <WingBlank size="lg">
          <Button type="primary" size="small" />
          <Tabs tabs={tabs} />
        </WingBlank>
        <WhiteSpace size='lg' />
        <WingBlank size="lg">{getLabel('520451','选择新的主题颜色')}</WingBlank>
        <WhiteSpace size='md' />
        <ColorPicker
          color={color}
          onChange={this.handleChange}
        />
      </div>
    );
  }

  handleChange = (color) => {
    const { hex } = color;
    window.localStorage.setItem('theme-color', hex);
    window.changeStyle && window.changeStyle.replace([
      { reg: /(#|%23)55(b|B)1(f|F)9/g, to: hex },
      { reg: /(#|%23)3998(e|E)2/g, to: hex },
    ]);
    this.forceUpdate();
  }
}
